<template>
  <n-config-provider wh-full :theme="appStore.isDark ? darkTheme : undefined" :theme-overrides="themeOverrides">
    <slot />
  </n-config-provider>
</template>

<script setup lang="ts">
import { darkTheme } from 'naive-ui'
import { useCssVar } from '@vueuse/core'
import { kebabCase } from 'lodash-es'
import { useAppStore } from '@/store'
import { lStorage } from '@/utils'
import { storeToRefs } from 'pinia'

const { themeOverrides } = storeToRefs(useAppStore())

watch(
  () => themeOverrides.value,
  (value) => {
    setupCssVar(value.common)
  },
  { immediate: true, deep: true }
)

useAppStore().setThemeOverrides()
const primaryColor = lStorage.get('primary-color')
primaryColor && useAppStore().setThemePrimary(primaryColor)

const appStore = useAppStore()

function setupCssVar(common: { [x: string]: string } | undefined) {
  for (const key in common) {
    useCssVar(`--${kebabCase(key)}`, document.documentElement).value = common[key as keyof typeof common] || ''
  }
}
</script>
